<template>
  <div>
    <nav>
      <div>
        <span> <a href="#">网易云音乐</a></span>

        <el-button type="success" icon="el-icon-arrow-left" @click="handleclike" size="mini" circle>
        </el-button>
        <el-button type="success" icon="el-icon-arrow-right" @click="handleUpclike" size="mini" circle>
        </el-button>
        <!-- <el-select v-model="form.columeType" placeholder="字段类型">
          <el-option v-for="(item,index) in columeTypeArr" :key="index" :label="item.label" :value="item.value">
          </el-option>
        </el-select> -->
        <Search class="search"></Search>
        <el-button icon="el-icon-mic" size="mini" class="microphone" circle>
        </el-button>
        <Login></Login>
      </div>
    </nav>
  </div>
</template>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
span {
  margin-right: 249px;
}
nav {
  position: fixed;
  z-index: 1000;
  width: 100%;
  height: 70px;
  background-color: #ec4141;
}
nav div {
  margin-left: 20px;
  line-height: 70px;
}
nav div a {
  color: #fff;
  text-decoration: none;
}
.search {
  position: absolute;
  top: 0px;
  left: 400px;
}
.microphone {
  position: absolute;
  top: 24px;
  left: 775px;
}
</style>
<script>
import Search from "./nav/Search";
import Login from "./nav/Login";
export default {
  data() {
    return {
      //  columeTypeArr:[{
      //       value:'String',
      //       label:'字符串'
      //   },{
      //       value:'Int',
      //       label:'整数',
      //   },{
      //       value:'Decimal',
      //       label:'数值型'
      //   }],
    };
  },
  components: {
    Search,
    Login,
  },
  methods: {
    handleclike() {
      this.$router.go(-1);
    },
    handleUpclike() {
      this.$router.go(+1);
    },
  },
};
</script>
